<template>
  <div class="rod-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <span class="search-label">一体杆名称：</span>
      <el-input clearable placeholder="请输入一体杆名称" class="search-main" v-model="params.poleName" @clear="search"></el-input>
      <span class="search-label">一体杆编号：</span>
      <el-input clearable placeholder="请输入一体杆编号" class="search-main" v-model="params.poleNumber" @clear="search"></el-input>
      <span class="search-label">运行状态：</span>
      <el-select v-model="params.poleStatus">
        <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-button type="primary" class="search-btn" @click="search">查询</el-button>
    </div>
    <!-- 添加删除区域 -->
    <div class="create-container">
      <el-button type="primary">添加一体杆</el-button>
      <el-button>批量删除</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="list">
        <el-table-column type="selection" width="55"/>
        <el-table-column type="index" label="序号" :index="indexMethod"/>
        <el-table-column label="一体杆名称" prop="poleName"/>
        <el-table-column label="一体杆编号" prop="poleNumber"/>
        <el-table-column label="一体杆IP" prop="poleIp"/>
        <el-table-column label="安装区域" prop="areaId" :formatter="formatRule3"/>
        <el-table-column label="一体杆类型" prop="poleType" :formatter="formatRule2"/>
        <el-table-column label="运行状态" prop="poleStatus" :formatter="formatRule1"/>
        <el-table-column label="操作" fixed="right" width="180">
          <el-button type="text">编辑</el-button>
          <el-button type="text">删除</el-button>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page-container">
      <el-pagination
        :current-page="params.page"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"                   
      />
    </div>
    <!-- 添加楼宇弹出框Dialog -->
    <div class="dialog-container">
      <el-dialog title="添加楼宇" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" :rules="addFormRules">
        <el-form-item label="一体杆名称" :label-width="formLabelWidth" prop="poleName">
          <el-input v-model="form.poleName" autocomplete="off" placeholder="请输入一体杆名称"></el-input>
        </el-form-item>
        <el-form-item label="一体杆编号" :label-width="formLabelWidth" prop="poleNumber">
          <el-input v-model="form.poleNumber" autocomplete="off" placeholder="请输入一体杆编号"></el-input>
        </el-form-item>
        <el-form-item label="一体杆IP" :label-width="formLabelWidth" prop="poleIp">
          <el-input v-model="form.poleIp" autocomplete="off"  placeholder="请输入一体杆IP">
          </el-input>
        </el-form-item>
        <el-form-item label="关联区域" :label-width="formLabelWidth"  prop="areaId">
          <el-input v-model="form.areaId" autocomplete="off"  placeholder="请选择关联区域">
          </el-input>
        </el-form-item>
        <el-form-item label="一体杆类型" :label-width="formLabelWidth" prop="poleType">
          <el-input v-model="form.poleType" autocomplete="off" placeholder="请选择一体杆类型"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button>取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </div>
    </el-dialog>
    </div>
  </div>
</template>
<script>
import { RodManageListAPI } from '@/api/rod-manage'
export default{
  name: 'RodManage',
  data() {
    return {
      list: [],
      params: {
        page: 1,
        pageSize: 5,
        poleName: '',
        poleNumber: '',
        poleStatus: ''
      },
      form: {
        poleName: '', //一体杆名称
        poleNumber: '', //一体杆编号
        poleIp: '', //一体杆IP
        areaId: '', //关联区域ID
        poleType: null  //一体杆类型，entrance入口，export出口
      },
      total: 0,
      statusList: [
        {
          label: '全部',
          value: null
        },
        {
          label: '正常',
          value: '0'
        },
        {
          label: '异常',
          value: '1'
        }
      ],
      typeList: [
        {
          label: '入口',
          value: 'entrance'
        },
        {
          label: '出口',
          value: 'export'
        }
      ],
      dialogFormVisible: false,
      addFormRules: {
        poleName: [
          { required: true, message: '请输入一体杆名称', trigger: 'blur' }
        ],
        poleNumber: [
          { required: true, message: '请输入一体杆编号', trigger: 'blur' }
        ],
        poleIp: [
          { required: true, message: '请输入一体杆IP', trigger: 'blur' }
        ],
        areaId: [
          { required: true, message: '请选择关联区域', trigger: 'blur' }
        ],
        poleType: [
          { required: true, message: '请选择一体杆类型', trigger: 'blur' }
        ],
      }
    }
  },
  created() {
    this.RodManageList()
  },
  methods: {
    //查询
    search() {
      this.params.page = 1
      this.RodManageList()
    },
    //安装区域转化
    formatRule3(row, column, cellValue) {
      /* console.log(row)
      console.log(column) */
      //console.log(cellValue)
      return `停车场${cellValue - 5}号`
    },
    //类型转换
    formatRule2(row, column, cellValue) {
      // console.log(cellValue)
      const rule = this.typeList.find(item => item.value === cellValue)
      return rule ? rule.label : ''
    },
    //状态转换
    formatRule1(row, column, cellValue) {
      const rule = this.statusList.find(item => item.value === cellValue)
      return rule ? rule.label : '异常'
    },
    //计算序号
    indexMethod(index) {
      return (this.params.page - 1) * this.params.pageSize + index + 1
    },
    //处理一页有多少条
    handleSizeChange(val) {
      //console.log(val)
      this.params.pageSize = val
      this.RodManageList()
    },
    //处理跳转到第几页
    handleCurrentChange(val) {
      this.params.page = val
      this.RodManageList()
    },
    //获取一体杆列表
    async RodManageList() {
      const res = await RodManageListAPI(this.params)
      //console.log(res)
      this.list = res.data.rows
      this.total = res.data.total
    }
  }
}
</script>

<style lang="scss" scoped>
.rod-container {
  padding: 20px;
  background-color: #fff;
}
.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;
  .search-main {
    width: 220px;
    margin-right: 10px;
  }
  .search-btn{
    margin-left:20px;
  }
}
.create-container{
  margin: 10px 0px;
}
.page-container{
  padding:4px 0px;
  text-align: right;
}

</style>
